<template>
  <div>
    <h2>软件管理</h2>
    <el-button style="float: right;margin-right: 200px" @click="loginout" type="primary">登出</el-button>
    <span style="color: orangered;float: right;margin-right: 30PX">当前用户：{{user.username}}</span>
    <br><br>
    <el-button style="float: left; padding: 3px;margin-left: 200px" @click="smanagement=true,gmanagement=false">软件管理</el-button>
    <el-button style="float: left; padding: 3px" @click="gmanagement=true,smanagement=false">分组管理</el-button>
    <br><br>
    <div v-show="smanagement" style="margin-left: 100px">
      <el-form :inline="true" :model="seartch" ref="loginFormRef">
        <el-form-item label="分组名称" prop="gname">
          <el-input v-model="seartch.gname" placeholder="分组名称"></el-input>
        </el-form-item>
        <el-form-item label="公司名称" prop="fid">
          <el-select v-model="seartch.fid">
            <el-option value=""></el-option>
            <el-option v-for="f in firms" :key="f.id" :value="f.id" :label="f.name"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="时间范围" prop="datea">
          <el-date-picker v-model="seartch.datea" placeholder="开始时间"></el-date-picker>
        </el-form-item>
        <el-form-item label="-" prop="dateb">
          <el-date-picker v-model="seartch.dateb" placeholder="结束时间"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" plain @click="resetForm">重置</el-button>
          <el-button type="primary" plain @click="query">查询</el-button>
          <el-button type="primary" plain @click="excel">导出</el-button>
        </el-form-item>
      </el-form>
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column prop="id" label="软件编号" width="80"></el-table-column>
        <el-table-column prop="name" label="软件名称" width="110"></el-table-column>
        <el-table-column prop="gname" label="分组" width="80"></el-table-column>
        <el-table-column prop="url" label="软件官网" width="120"></el-table-column>
        <el-table-column prop="fname" label="公司名称" width="110"></el-table-column>
        <el-table-column prop="created" label="上传时间" width="110"></el-table-column>
        <el-table-column label="操作" width="300">
          <template slot-scope="scope">
          <el-button type="warning" plain @click="delSoft(scope.row.id)">删除</el-button>
          <el-button type="info" plain @click="upSoft(scope.row.id)">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-footer>
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="seartch.page"
            :page-size="seartch.pageSize"
            layout="total, prev, pager, next"
            :total="seartch.total">
          </el-pagination>
        </div>
        <el-button style="float: right;margin-right: 200px" @click="add" type="primary">添加</el-button>
        <el-button style="float: right;margin-right: 10px" @click="loaddialogVisible=true" type="primary">批量导入</el-button>
      </el-footer>
    </div>
    <el-dialog
      title="添加页面"
      :visible.sync="dialogVisible">
      <el-form ref="form" :rules="rules" :model="form" label-width="120px">
        <el-form-item label="软件编号">
          <el-input v-model="form.id"></el-input>
        </el-form-item>
        <el-form-item label="软件名称" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="主要群体">
          <el-radio-group v-model="form.main">
            <el-radio label="1">学生</el-radio>
            <el-radio label="2">市民</el-radio>
            <el-radio label="3">幼儿</el-radio>
          </el-radio-group>
        </el-form-item>{{form.main}}
        <el-form-item label="网址" prop="url">
          <el-input v-model="form.url" type="url"></el-input>
        </el-form-item>
        <el-form-item label="所属分组" prop="gid">
        <el-select v-model="form.gid">
          <el-option value=""></el-option>
          <el-option v-for="g in grouts" :key="g.id" :label="g.name" :value="g.id"></el-option>
        </el-select>
        </el-form-item>
        <el-form-item label="所属公司" prop="fid">
        <el-select v-model="form.fid">
          <el-option value=""></el-option>
          <el-option v-for="f in firms" :key="f.id" :label="f.name" :value="f.id"></el-option>
        </el-select>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="form.email"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="tel">
          <el-input v-model="form.tel"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="save">保存</el-button>
  </span>
    </el-dialog>
    <el-dialog
      title="修改页面"
      :visible.sync="updialogVisible">
      <el-form ref="form" :model="form" label-width="120px">
        <el-form-item label="软件编号">
          <el-input v-model="form.id"></el-input>
        </el-form-item>
        <el-form-item label="软件名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="主要群体">
          <el-radio-group v-model="form.main">
            <el-radio label="1">学生</el-radio>
            <el-radio label="2">市民</el-radio>
            <el-radio label="3">幼儿</el-radio>
          </el-radio-group>
        </el-form-item>{{form.main}}
        <el-form-item label="网址">
          <el-input v-model="form.url"></el-input>
        </el-form-item>
        <el-form-item label="所属分组">
          <el-select v-model="form.gid">
            <el-option value=""></el-option>
            <el-option v-for="g in grouts" :key="g.id" :label="g.name" :value="g.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属公司">
          <el-select v-model="form.fid">
            <el-option value=""></el-option>
            <el-option v-for="f in firms" :key="f.id" :label="f.name" :value="f.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="form.email"></el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="form.tel"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="updateSave">保存</el-button>
  </span>
    </el-dialog>
    <el-dialog
      title="文件导入"
      :visible.sync="loaddialogVisible"
      width="30%">
      <el-upload
        class="upload-demo"
        ref="upload"
        action="http://localhost:8705/file/upload"
        :auto-upload="false">
        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
        <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
      </el-upload>
      <span slot="footer" class="dialog-footer">
    <el-button @click="loaddialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="loaddialogVisible = false">确 定</el-button>
  </span>
    </el-dialog>
    <div  v-show="gmanagement" style="margin-left: 100px">
      <el-form :inline="true" style="float: left;margin-left: 100px" :model="seartch" ref="loginFormRef">
        <el-form-item label="时间范围" prop="datea">
          <el-date-picker v-model="seartch.datea" placeholder="开始时间"></el-date-picker>
        </el-form-item>
        <el-form-item label="-" prop="dateb">
          <el-date-picker v-model="seartch.dateb" placeholder="结束时间"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" plain @click="query2">查询</el-button>
        </el-form-item>
      </el-form>
      <el-table
        :data="tableData2"
        tooltip-effect="dark"
        style="width: 100%">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column prop="id" label="id" width="80"></el-table-column>
        <el-table-column prop="name" label="分组名称" width="110"></el-table-column>
        <el-table-column prop="dis" label="描述" width="80"></el-table-column>
        <el-table-column prop="num" label="软件数量" width="80"></el-table-column>
        <el-table-column label="操作" width="200">
          <el-button type="primary" plain @click="excel2">导出excel</el-button>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ListView',
  data () {
    return {
      tableData2: [],
      loaddialogVisible: false,
      updialogVisible: false,
      dialogVisible: false,
      smanagement: false,
      gmanagement: false,
      user: {
        username: ''
      },
      tableData: [],
      selected: [],
      seartch: {
        page: 1,
        pageSize: 3,
        gname: '',
        fid: null,
        total: 0,
        datea: '',
        dateb: ''
      },
      grouts: [],
      firms: [],
      form: {
        id: null,
        name: '',
        main: null,
        url: '',
        gid: null,
        fid: null,
        email: '',
        tel: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入软件名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        url: [
          { required: true, message: '请输入网址', trigger: 'blur' },
          { type: 'url', message: '请输入合法网址', trigger: 'blur' }
        ],
        gid: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        fid: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { type: 'email', message: '请输入合法邮箱', trigger: 'blur' }
        ],
        tel: [
          { required: true, message: '请填手机号', trigger: 'blur' }
        ]
      }
    }
  },
  created () {
    this.query()
    this.query2()
    this.user = this.$store.state.userInfo
    this.axios.get('/firm/firmList').then(res => {
      this.firms = res.data.jdata
    })
    this.axios.get('/group/groupList').then(res => {
      this.grouts = res.data.jdata
    })
  },
  methods: {
    // 分组导出excel
    excel2 () {
      window.open('http://localhost:8705/excel/download2')
    },
    // 分组管理列表
    query2 () {
      this.axios.post('/group/countByGid', this.seartch).then(res => {
        this.tableData2 = res.data.jdata
      })
    },
    // 文件上传
    submitUpload () {
      this.$refs.upload.submit()
    },
    // 修改 回显
    upSoft (id) {
      this.updialogVisible = true
      this.axios.get('/software/getSoftware', { params: { id: id } }).then(res => {
        this.form = res.data.jdata
        this.$message.success('ok')
      })
    },
    // 修改保存
    updateSave () {
      this.axios.post('/software/update', this.form).then(res => {
        if (res.data.code === 200) {
          this.$message.success('修改成功')
          this.updialogVisible = false
        }
      })
    },
    // 删除
    delSoft (id) {
      this.axios.get('/software/delete', { params: { id: id } }).then(res => {
        if (res.data.code === 200) {
          this.$message.success('删除成功')
          this.query()
        }
      })
    },
    // 保存
    save () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.axios.post('/software/save', this.form).then(res => {
            if (res.data.code === 200) {
              this.$message.success('添加成功')
              this.dialogVisible = false
            }
          })
        } else {
          this.$message.error('信息不完整')
          return false
        }
      })
    },
    add () {
      /* this.dialogVisible = true */
      if (this.$store.state.userInfo.role === 'ADMIN') {
        this.dialogVisible = true
      } else {
        this.$message.error('非管理员')
      }
    },
    excel () {
      window.open('http://localhost:8705/excel/download')
    },
    // 重置
    resetForm () {
      this.$refs.loginFormRef.resetFields()
    },
    // 页码
    handleCurrentChange (val) {
      this.seartch.page = val
      this.query()
    },
    // 每页条数
    handleSizeChange (val) {
      this.seartch.pageSize = val
      this.query()
    },
    // 分页列表
    query () {
      this.axios.post('/softwarevo/page', this.seartch).then(res => {
        this.tableData = res.data.jdata.records
        this.seartch.page = res.data.jdata.current
        this.seartch.pageSize = res.data.jdata.size
        this.seartch.total = res.data.jdata.total
      })
    },
    // 选中行
    handleSelectionChange (val) {
      this.selected = val
    },
    // 登出
    loginout () {
      this.$store.state.token = []
      this.$store.state.userInfo.username = ''
      this.$router.push('/login')
    }
  }
}
</script>

<style scoped>

</style>
